웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
CSS를 사용하여 텍스트에 외곽선(border) 스타일을 추가하려고 합니다. 이때 몇 가지 방법들이 존재하는데요 ~ 외곽선이나 그림자 효과 등 어떤 방법들이 있는지 알아보고 내가 원하는 효과와 맞는 방법을 생각해봅니다.
# CSS 외곽선 또는 그림자 효과를 구현하는 방법
텍스트에 외곽선이나 그림자 효과를 추가하는 이유는 해당 텍스트를 다른 텍스트들보다 더 강조하기 위함이겠죠 ~ 보통 핵심 키워드가 있다면 강조하여 표시하고자 이런 방법을 사용합니다. 일단 아래와 같이 세 가지로 구분하였습니다.
1. 그림자 효과 부여하기 text-shadow
2. 외곽선 효과 부여하기, -webkit-text-stroke
3. 그림자 효과를 사용하여 외곽선 구현하기(브라우저 호환성 목적)
위 세 가지 방법들이 가장 많이 쓰이는 방법이라 하겠습니다. 이 중에서 css를 사용했을때 어떤 장점과 단점이 있는지 비교하면서 알아봅니다. 일단 구현 방법입니다.
! 그림자 효과 부여하기, text-shadow
가장 간단한 구현 방법으로 쉽고 빠르다는 장점이 있습니다. 단점이라면 그림자의 좌우 상하 조절이 가능하지만 그블러 효과가 같이 나타나기 때문에 좀 더 커스터마이징이 필요하다면 한계가 있는 방법입니다. 다만 쉽고 빠르게 적용할 때 추천합니다.
아래는 간단하게 구현한 모습니다. 다른 방법에 비하여 코드도 짧고 간결하죠~
<hr />
<span id="test1">ABCDEF</span>
<hr />
<style>
#test1 {
font-size: 60px;
text-shadow: 2px 2px 4px red;
}
</style>
<span id="test1">ABCDEF</span>
<hr />
<style>
#test1 {
font-size: 60px;
text-shadow: 2px 2px 4px red;
}
</style>
위에 구현된 코드를 보면 빨간색의 그림자 효과가 구현된 것을 알 수 있습니다. 실제 코드는 아래와 같습니다.
<span id="test1">ABCDEF</span>
<style>
#test1 {
font-size: 60px;
text-shadow: 2px 2px 4px red;
}
</style>
<style>
#test1 {
font-size: 60px;
text-shadow: 2px 2px 4px red;
}
</style>
그럼 다음 방법을 알아봅니다.
! 외곽선을 추가하는 방법, -webkit-text-stroke
이번에는 css의 -webkit-text-stroke 스타일 속성을 사용한 방법으로 IE 호환성 그리고 Webkit 엔진에만 사용 가능하여 브라우저 호환성 때문에 예전에는 잘 사용되지 않던 방법이지만 그래도 많이 쓰이고 있습니다. 방법도 간단합니다. 길이와 색을 설정하기만 하면 되므로 쉽죠. 하지만 그래서 다양한 효과 구현에는 조금 미흡합니다. 아래는 이를 구현한 모습입니다.
<hr />
<span id="test2">ABCDEF</span>
<hr />
<style>
#test2 {
font-size: 60px;
-webkit-text-stroke: 2px red;
}
</style>
<span id="test2">ABCDEF</span>
<hr />
<style>
#test2 {
font-size: 60px;
-webkit-text-stroke: 2px red;
}
</style>
구현된 코드는 아래와 같습니다.
<span id="test2">ABCDEF</span>
<style>
#test2 {
font-size: 60px;
-webkit-text-stroke: 2px red;
}
</style>
<style>
#test2 {
font-size: 60px;
-webkit-text-stroke: 2px red;
}
</style>
이제 마지막 방법인 text-shadow를 여러 번 사용한 방법입니다.
! text-shaow를 여러 번 사용하여 외곽선 구현하기
예전부터 이 방법은 css 트릭으로 많이 사용되어 왔습니다. text-shadow를 한 번만 사용해서는 다양한 효과나 한계가 많기 때문에 여러 번 반복 사용하여 원하는 효과를 비슷하게 구현하는 것이 목적이라 하겠습니다. 물론 대신에 코드가 복잡하고 시간이 더 드는 단점이 있습니다. 하지만 무엇보다도 text-shadow 속성이 브라우저 호환성이 높아 아직까지 많이 쓰이는 방법입니다. 그럼 코드를 살펴봅니다.
<hr />
<span id="test3">ABCDEF</span>
<hr />
<style>
#test3 {
font-size: 60px;
text-shadow: -1px -1px 0 red, 1px -1px 0 red, -1px 1px 0 red, 1px 1px 0 red;
}
</style>
<span id="test3">ABCDEF</span>
<hr />
<style>
#test3 {
font-size: 60px;
text-shadow: -1px -1px 0 red, 1px -1px 0 red, -1px 1px 0 red, 1px 1px 0 red;
}
</style>
아래는 위 예제를 구현한 코드입니다.
<span id="test3">ABCDEF</span>
<style>
#test3 {
font-size: 60px;
text-shadow: -1px -1px 0 red, 1px -1px 0 red, -1px 1px 0 red, 1px 1px 0 red;
}
</style>
<style>
#test3 {
font-size: 60px;
text-shadow: -1px -1px 0 red, 1px -1px 0 red, -1px 1px 0 red, 1px 1px 0 red;
}
</style>
위에 적용된 코드를 보면 맨 처음 방법과는 다르게 콤마를 사용하여 여러 방향으로 각각의 스타일을 구현한 부분이 차이점이며 핵심입니다. 이렇게 여러 번 사용하여 외곽선의 길이를 다르게 하거나 아웃라인이나 인라인 원하는 방식으로 구현하는 것도 가능합니다.
@ 팁 및 정보
추가로 위와 같이 효과를 부여하는 방법 중에 다른 방법이 하나 더 있습니다. 바로 두 개의 동일한 문구를 가진 텍스트 엘리먼트를 따로 사용하여 하나를 외곽선이나 그림자로 사용하는 방법입니다. 이 방법은 일반적인 경우 필요하지는 않지만 구현해야 할 그림자, 외곽선 효과가 쉽게 구현하기 어려운 경우나 애니메이션이 필요한 경우에 더 많이 쓰입니다.
여기까지 간단하게 외곽선이나 그림자 효과를 부여하는 방법에 대하여 알아봤습니다. 간단하고 잘 알려진 방법이므로 간략하게 기억해두면 좋을 것입니다.
아래의 글도 찾고 계시지 않나요?
